Adwaita: wide paned separator style
authorLapo Calamandrei <calamandrei@gmail.com>
Tue, 21 Oct 2014 11:25:17 +0000 (13:25 +0200)
committerLapo Calamandrei <calamandrei@gmail.com>
Tue, 21 Oct 2014 11:25:17 +0000 (13:25 +0200)
...paned separator decoration fixed in the process.

gtk/resources/theme/Adwaita/_common.scss
gtk/resources/theme/Adwaita/gtk-contained-dark.css
gtk/resources/theme/Adwaita/gtk-contained.css

index 564521e3014eb867319492ff0d07f3651363227d..f387f917b68e81f780478af11f9d876cfd09da95 100644 (file)
@@ -8,7 +8,6 @@ $ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
   padding: 0;
   -GtkToolButton-icon-spacing: 4;
   -GtkTextView-error-underline-color: $error_color;
-  -GtkPaned-handle-size: 1;
 
   -GtkCheckButton-indicator-size: 16;
   -GtkCheckMenuItem-indicator-size: 16;
@@ -2749,24 +2748,40 @@ GtkPlacesSidebar.sidebar .view {
   }
 }
 
-GtkPaned {
-  // This is actually the invisible area of the paned separator, not a margin...
-  margin: 0 8px 8px 0; //drag area of the separator
+GtkPaned { // this is for the standard paned separator
+
+  -GtkPaned-handle-size: 1; // sets separator width
+
+  margin: 0 8px 8px 0; // drag area of the separator, not a real margin
   &:dir(rtl) {
     margin-right: 0;
     margin-left: 8px;
   }
+  .pane-separator {
+    //FIXME abusing a background-image to get rid of the handle decoration
+    //I'd like something better...
+    background-image: linear-gradient(to bottom, $borders_color);
+    background-color: transparent; // transparent background color to gets rid of the decoration.
+    &:backdrop {
+      background-image: linear-gradient(to bottom, $backdrop_borders_color);
+    }
+  }
 }
 
-.pane-separator {
-  //FIXME abusing a background-image to get rid of the handle decoration
-  //I'd like something better...
-  background-image: linear-gradient(to bottom, $borders_color);
-  &:backdrop {
-    background-image: linear-gradient(to bottom, $backdrop_borders_color);
+GtkPaned.wide { // this is for the paned with wide separator
+  -GtkPaned-handle-size: 5; // wider separator here
+  margin: 0; // no need of the invisible drag area so, reset margin
+  .pane-separator {
+    border-style: none solid;
+    border-color: $borders_color;
+    background-image: none;
+    border-width: 1px;
   }
+  &.vertical .pane-separator { border-style: solid none;}
+  .pane-separator:backdrop { border-color: $backdrop_borders_color; }
 }
 
+
 /**************
  * GtkInfoBar *
  **************/
index 6348c6033966382af586847dd5d35afc9dc23ad0..191cb65cb75468ef729f7bbde85c56ab5806da27 100644 (file)
@@ -2,7 +2,6 @@
   padding: 0;
   -GtkToolButton-icon-spacing: 4;
   -GtkTextView-error-underline-color: #cc0000;
-  -GtkPaned-handle-size: 1;
   -GtkCheckButton-indicator-size: 16;
   -GtkCheckMenuItem-indicator-size: 16;
   -GtkScrolledWindow-scrollbar-spacing: 0;
@@ -4070,15 +4069,29 @@ GtkPlacesSidebar.sidebar .view {
     background-size: 6px 6px, 0 0; }
 
 GtkPaned {
+  -GtkPaned-handle-size: 1;
   margin: 0 8px 8px 0; }
   GtkPaned:dir(rtl) {
     margin-right: 0;
     margin-left: 8px; }
-
-.pane-separator {
-  background-image: linear-gradient(to bottom, #1c1f1f); }
-  .pane-separator:backdrop {
-    background-image: linear-gradient(to bottom, #1e2222); }
+  GtkPaned .pane-separator {
+    background-image: linear-gradient(to bottom, #1c1f1f);
+    background-color: transparent; }
+    GtkPaned .pane-separator:backdrop {
+      background-image: linear-gradient(to bottom, #1e2222); }
+
+GtkPaned.wide {
+  -GtkPaned-handle-size: 5;
+  margin: 0; }
+  GtkPaned.wide .pane-separator {
+    border-style: none solid;
+    border-color: #1c1f1f;
+    background-image: none;
+    border-width: 1px; }
+  GtkPaned.wide.vertical .pane-separator {
+    border-style: solid none; }
+  GtkPaned.wide .pane-separator:backdrop {
+    border-color: #1e2222; }
 
 /**************
  * GtkInfoBar *
index 9545fe5aa264bb41f2882f697842c6ffe7c232b0..fa6e203fa36b69206871296c1d264d448052030c 100644 (file)
@@ -2,7 +2,6 @@
   padding: 0;
   -GtkToolButton-icon-spacing: 4;
   -GtkTextView-error-underline-color: #cc0000;
-  -GtkPaned-handle-size: 1;
   -GtkCheckButton-indicator-size: 16;
   -GtkCheckMenuItem-indicator-size: 16;
   -GtkScrolledWindow-scrollbar-spacing: 0;
@@ -4231,15 +4230,29 @@ GtkPlacesSidebar.sidebar .view {
     background-size: 6px 6px, 0 0; }
 
 GtkPaned {
+  -GtkPaned-handle-size: 1;
   margin: 0 8px 8px 0; }
   GtkPaned:dir(rtl) {
     margin-right: 0;
     margin-left: 8px; }
-
-.pane-separator {
-  background-image: linear-gradient(to bottom, #a1a1a1); }
-  .pane-separator:backdrop {
-    background-image: linear-gradient(to bottom, #a8a8a8); }
+  GtkPaned .pane-separator {
+    background-image: linear-gradient(to bottom, #a1a1a1);
+    background-color: transparent; }
+    GtkPaned .pane-separator:backdrop {
+      background-image: linear-gradient(to bottom, #a8a8a8); }
+
+GtkPaned.wide {
+  -GtkPaned-handle-size: 5;
+  margin: 0; }
+  GtkPaned.wide .pane-separator {
+    border-style: none solid;
+    border-color: #a1a1a1;
+    background-image: none;
+    border-width: 1px; }
+  GtkPaned.wide.vertical .pane-separator {
+    border-style: solid none; }
+  GtkPaned.wide .pane-separator:backdrop {
+    border-color: #a8a8a8; }
 
 /**************
  * GtkInfoBar *